import { BorderBox12, BorderBox13 } from "@jiaminghi/data-view-react";
import React, { useEffect, useState } from "react";
import { Request } from "@/services";
import TrafficSituation from "./components/TrafficSituation";
import UserInfoState from "./components/UserInfoState";

interface LeftPageConfigType {
  trafficStatus: Record<string, any>;
  userStatus: any[];
}

const LeftPage: React.FC = () => {
  const [config, setConfig] = useState<LeftPageConfigType>({
    trafficStatus: {},
    userStatus: []
  });

  const getConfig = async () => {
    try {
      const resp = await Request.post("/leftPageData");
      setConfig(resp.data);
    } catch (e) {
      setConfig({
        trafficStatus: {},
        userStatus: []
      });
    }
  };

  useEffect(() => {
    getConfig().finally();
  }, []);

  return (
    <div className="flex flex-col">
      <BorderBox12 style={{ width: "100%", height: "352px", padding: "15px" }}>
        <div className="w-full h-full bg-[rgba(19,25,47,.6)] rounded-[10px]">
          <div className="flex items-center p-[10px]">
            <i className="iconfont text-[14px] mr-[10px] text-[#89e5ff] font-normal">&#xe78f;</i>
            <span className="text-[16px] font-bold text-[#bcdcff]">今日流量态势</span>
          </div>
          <TrafficSituation data={config.trafficStatus} />
        </div>
      </BorderBox12>
      <BorderBox13 style={{ width: "100%", height: "592px", marginTop: "20px", padding: "20px 15px" }}>
        <div className="w-full h-full bg-[rgba(19,25,47,.6)] rounded-[10px]">
          <div className="flex items-center p-[10px]">
            <i className="iconfont text-[14px] mr-[10px] text-[#89e5ff] font-normal">&#xe88e;</i>
            <span className="text-[16px] font-bold text-[#bcdcff]">用户数据状态</span>
          </div>
          <UserInfoState data={config.userStatus} />
        </div>
      </BorderBox13>
    </div>
  );
};

export default LeftPage;
